import { defineComponent, ref, inject } from 'vue'
import { useFullscreen } from '@vueuse/core'
import type { FormInst, FormRules } from 'naive-ui'
import { NButton, useMessage, NModal, NForm, NFormItem, NInput, NInputNumber } from 'naive-ui'
import dictionaryApi from '@/service/api/dictionary'
import pageStyle from '../index.module.scss'
import MacHeader from '@/components/codeBlock/MacHeader'
interface mlItemState {
  id?: number
  name: string
  typeKey: string
  sort: number
}

export default defineComponent({
  emits: ['success'],
  setup(props, { emit, expose }) {
    const $clone = inject('$clone') as <T>(data: T) => T
    const modalRef = ref()
    const { isFullscreen, toggle } = useFullscreen(modalRef)
    const show = ref(false)
    const title = ref('添加')
    const toast = useMessage()
    const queryForm: any = ref<mlItemState>({
      name: '',
      typeKey: '',
      sort: 1
    })
    const formRef = ref<FormInst | null>(null)
    const rules: FormRules = {
      name: [
        {
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }
      ],
      typeKey: [
        {
          required: true,
          message: '请输入唯一标识',
          trigger: 'blur'
        }
      ]
    }
    const handleValidateClick = (e: MouseEvent) => {
      e.preventDefault()
      formRef.value?.validate(errors => {
        if (!errors) {
          save()
        }
      })
    }

    const save = async () => {
      const params = $clone(queryForm.value)
      if (params?.id) {
        const { code, message } = await dictionaryApi.edit(params)
        if (code !== 200) {
          toast.error(message)
          return
        }
        toast.success('编辑成功')
      } else {
        const { code, message } = await dictionaryApi.add(params)
        if (code !== 200) {
          toast.error(message)
          return
        }
        toast.success('添加成功')
      }
      emit('success')
      close()
    }
    const close = () => {
      queryForm.value = {
        name: '',
        typeKey: '',
        sort: 1
      }
      show.value = false
    }

    const open = (row?: mlItemState) => {
      title.value = '添加'
      if (row) {
        queryForm.value = $clone(row)
        title.value = row?.id ? '编辑' : '添加'
      }
      show.value = true
    }

    expose({
      open
    })
    return () => (
      <NModal show={show.value} onUpdateShow={close}>
        <div ref={modalRef} class={pageStyle.modalEdit}>
          <MacHeader
            title={title.value}
            is-fullscreen={isFullscreen.value}
            show-desc={false}
            onToggle={toggle}
            onClose={close}
          />
          <div class="content">
            <NForm ref={formRef} model={queryForm.value} rules={rules}>
              <NFormItem label="名称" path="name">
                <NInput v-model:value={queryForm.value.name} placeholder="请输入" />
              </NFormItem>
              <NFormItem label="唯一标识" path="typeKey">
                <NInput v-model:value={queryForm.value.typeKey} placeholder="请输入" />
              </NFormItem>
              <NFormItem label="权重" path="sort">
                <NInputNumber
                  class="w-full"
                  v-model:value={queryForm.value.sort}
                  placeholder="请输入"
                />
              </NFormItem>
              <NFormItem>
                <div class="w-full flex justify-end">
                  <NButton type="primary" attr-type="button" onClick={handleValidateClick}>
                    <span>提交</span>
                  </NButton>
                </div>
              </NFormItem>
            </NForm>
          </div>
        </div>
      </NModal>
    )
  }
})
